<template>
  <!-- 新增修改地址 -->
  <a-drawer  title="添加地址" v-model:visible="addressVisible" v-if="addressVisible" width="500px">
        <a-form ref="addressFormRef" :model="form" :rules="rules" label-width="100px">
           <a-form-item label="地址简称" field="address_name">
              <a-input v-model="form.address_name" placeholder="请输入地址简称" />
           </a-form-item>
           <a-form-item label="联系人" field="name">
              <a-input v-model="form.name" placeholder="请输入联系人" />
           </a-form-item>
           <a-form-item label="公司" field="company">
              <a-input v-model="form.company" placeholder="请输入公司" />
           </a-form-item>
           <a-form-item label="地址编码" field="code">
              <a-input v-model="form.code" placeholder="请输入地址编码" />
           </a-form-item>
           <a-form-item label="电话" field="tel">
              <a-input v-model="form.tel" placeholder="请输入电话" />
           </a-form-item>
           <a-form-item label="地址一" field="address_1">
              <a-input v-model="form.address_1" placeholder="请输入地址一" />
           </a-form-item>
           <a-form-item label="地址二" field="address_2">
              <a-input v-model="form.address_2" placeholder="请输入地址二" />
           </a-form-item>
           <a-form-item label="地址三" field="address_3">
              <a-input v-model="form.address_3"  placeholder="请输入地址三" />
           </a-form-item>
           <a-form-item label="国家" field="country">
           <a-select
                 v-model="form.country"
                 clearable
                 filterable
                 placeholder="请选择国家"
              >
                 <a-option
                    v-for="item in columnsDist.dictObj.data.countrys"
                    :key="item.key"
                    :label="item.title+item.key"
                    :value="item.key"
                 />
              </a-select>
        </a-form-item>
           <a-form-item label="城市" field="city">
              <a-input v-model="form.city" placeholder="请输入城市" />
           </a-form-item>
           <a-form-item label="州" field="state">
              <a-input v-model="form.state" placeholder="请输入州" />
           </a-form-item>
          
           <a-form-item label="邮编" field="postcode">
              <a-input v-model="form.postcode" placeholder="请输入邮编" />
           </a-form-item>
           <a-form-item label="备注" field="remark">
              <a-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
           </a-form-item>    
        </a-form>
        <template #footer>        
          <a-button @click="close">关闭</a-button>
          <a-button type="primary" @click="submitForm(addressFormRef)">
            保存
          </a-button>
        </template>
  </a-drawer>
</template>

<script setup lang="jsx">
  import {watch,inject,ref,nextTick,reactive,computed} from 'vue'
import waybill from '@/api/abroad/waybill'
import { Message, Modal } from '@arco-design/web-vue'
const addressVisible = ref(false);
const columnsDist = inject('columnsDist')
const addressFormRef=ref(null)
const rules=reactive({
  address_name: [{ required: true, message: "地址简称不能为空", trigger: "blur" }],
  name: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
  code: [{ required: true, message: "地址编码不能为空", trigger: "blur" }],
  tel: [{ required: true, message: "电话不能为空", trigger: "blur" }],
  address_1: [{ required: true, message: "地址一不能为空", trigger: "blur" }],
  city: [{ required: true, message: "城市不能为空", trigger: "blur" }],
  country: [{ required: true, message: "国家不能为空", trigger: "blur" }],
  postcode: [{ required: true, message: "邮编不能为空", trigger: "blur" }],
})   
const form=ref({
   address_name: "",
   name: "",
   company: "",
   code: "",
   tel: "",
   address_1: "",
   address_2: "",
   address_3: "",
   city: "",
   state: "",
   country: "",
   postcode: "",
   remark: ""
})
//弹框信息
const open = (val) => {
  addressVisible.value = true;
  // getcountrysDic()
}

const emits = defineEmits(['addClickRess','emitClick'])
 //新增 //编辑
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (!valid) {
        waybill.saveSeaAddress(form.value).then(res => {
          Message.success(res.message || `新增成功！`)
          emits('addClickRess');
          close()
        })
    }
  })
  }
const close = () => {
  addressFormRef.value.resetFields()
  addressVisible.value = false
    //  proxy.resetForm("addressFormRef");
}
defineExpose({
  open,
});
</script>
<style scoped>

</style>